@inject IJSRuntime JSRuntime

@code {
    [CascadingParameter] MudDialogInstance MudDialog { get; set; } = default!;
    [Parameter] public string DiagramContent { get; set; } = default!;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("mermaid.init");
        }
        await JSRuntime.InvokeVoidAsync("initializeZoomist");
    }

    private void Close() => MudDialog.Close();

    private async Task CopyDiagramToClipboard()
    {
        await JSRuntime.InvokeVoidAsync("navigator.clipboard.writeText", DiagramContent);
    }
}

<MudDialog>
    <DialogContent>
        <div>
            <div style="margin: 15px;">
                <MudPaper Elevation="3">
                    <div id="zoomist" class="zoomist-container">
                        <div class="zoomist-wrapper">
                            <div class="zoomist-image">
                                <div class="mermaid" style="text-align: center; margin: 10px; min-height: 200px;">
                                    @DiagramContent
                                </div>
                            </div>
                        </div>
                    </div>
                </MudPaper>
            </div>
        </div>
    </DialogContent>
    <DialogActions>
        <MudTooltip Text="Copy Diagram to Clipboard">
            <MudIconButton Icon="@Icons.Material.Filled.ContentCopy" Size="Size.Medium" Color="Color.Primary"
                OnClick="@CopyDiagramToClipboard" />
        </MudTooltip>
        <MudButton Color="Color.Primary" OnClick="Close">Close</MudButton>
    </DialogActions>
</MudDialog>
